<template>
  <div style="padding: 0 15px;">

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height:32px;">
              管理员信息
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right;">
          <div class="grid-content bg-purple">
            <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="addDialogVisible = true">新增用户</el-button>
            <el-button size="small" type="primary" icon="el-icon-remove-outline">删除用户</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="divider" />

      <el-row :gutter="15" class="whererow">
        <el-col :span="4" style="line-height:32px;">当前共{{ total }}个用户</el-col>
        <el-col :span="6">
          <el-input v-model="keyword" type="text" size="small" placeholder="请输入用户名称" @blur="loadList">
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </el-col>
      </el-row>

    </div>

    <!-- <div class="noticerow box">
      <i class="el-icon-edit" /> &nbsp; 已选择了0项
    </div> -->

    <el-table
      ref="multipleTable"
      border
      :data="adminList"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <!-- <el-table-column align="center" type="selection" width="55" /> -->
      <el-table-column align="center" label="编号" width="60">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column align="center" label="昵称">
        <template slot-scope="scope">{{ scope.row.nickname }}</template>
      </el-table-column>
      <el-table-column align="center" label="手机号码">
        <template slot-scope="scope">{{ scope.row.phone }}</template>
      </el-table-column>
      <el-table-column align="center" label="电子邮箱" width="200">
        <template slot-scope="scope">{{ scope.row.email }}</template>
      </el-table-column>
      <el-table-column align="center" label="启用" width="130">
        <template slot-scope="scope">
          <p><el-switch
            v-model="scope.row.enable"
            active-color="#1aa"
            inactive-color="#aaa"
            :active-value="1"
            :inactive-value="0"
            @change="changeEnable(scope.row, scope.index)"
          /></p>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="最后登录IP" width="200">
        <template slot-scope="scope">{{ scope.row.lastLoginIp }}</template>
      </el-table-column>
      <el-table-column align="center" label="累计登录" width="200">
        <template slot-scope="scope">{{ scope.row.loginCount }}</template>
      </el-table-column>
      <el-table-column align="center" label="最后登录时间" width="200">
        <template slot-scope="scope">{{ scope.row.gmtLastLogin }}</template>
      </el-table-column> -->
      <el-table-column align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button title="分配角色" type="primary" size="mini" icon="el-icon-user" circle @click="roleDialogVisible = true" />
          <el-button title="编辑用户" type="warning" size="mini" icon="el-icon-edit" circle @click="editDialogVisible = true" />
          <el-button title="删除用户" type="danger" size="mini" icon="el-icon-delete" circle @click="$router.push('#'+scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <!-- <el-cascader v-model="value" size="small" :options="options" /> -->
      <el-pagination
        background
        :current-page="pageNum"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 分配角色的弹出框 -->
    <el-dialog
      title="分配角色"
      :visible.sync="roleDialogVisible"
      width="30%"
      :modal-append-to-body="false"
    >
      <el-select v-model="selectRoles" multiple placeholder="请选择角色">
        <el-option label="系统管理员" value="1" />
        <el-option label="运营管理员" value="2" />
        <el-option label="商品管理员" value="3" />
        <el-option label="订单管理员" value="4" />
      </el-select>
      <div slot="footer">
        <el-button @click="roleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="roleDialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增用户的弹窗 -->
    <el-dialog title="新增用户" :visible.sync="addDialogVisible" :modal-append-to-body="false">
      <el-row>
        <el-col :span="16">
          <el-form ref="form" :model="formData" label-width="80px" size="small">
            <el-form-item label="账号">
              <el-input v-model="formData.username" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formData.password" type="password" />
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="formData.nickname" />
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input v-model="formData.phone" />
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="formData.email" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="formData.description" type="textarea" />
            </el-form-item>
            <el-form-item label="个人介绍">
              <el-input v-model="formData.desc" type="textarea" />
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="handleAddNew">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <!-- :data 上传图片携带的参数 -->
          <el-upload
            class="avatar-uploader"
            name="avatar"
            :data="{ title: '头像' }"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="tokenHeader"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 130px; height: auto;">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 修改用户的弹窗 -->
    <el-dialog title="修改用户" :visible.sync="editDialogVisible" :modal-append-to-body="false">
      <el-row>
        <el-col :span="16">
          <el-form ref="form" :model="formData" label-width="80px" size="small">
            <el-form-item label="账号">
              <el-input v-model="formData.loginName" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formData.pwd" type="password" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="formData.name" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formData.email" />
            </el-form-item>
            <el-form-item label="个人介绍">
              <el-input v-model="formData.desc" type="textarea" />
            </el-form-item>

            <el-form-item size="large">
              <el-button type="primary">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-upload
            class="avatar-uploader"
            name="avatar"
            :action="UPLOAD_URL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 130px; height: auto;">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-col>
      </el-row>

    </el-dialog>

  </div>
</template>

<script>
import * as api from '@/api/admin'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      // 上传图片的地址和参数
      UPLOAD_URL: `${process.env.VUE_APP_BASE_API}upload/admin-avatar`,
      imageUrl: '', // 表示上传图片的访问路径
      // 上传图片的请求头，用于携带token
      tokenHeader: { Authorization: getToken() },
      // 正在编辑的用户
      formData: {},
      addDialogVisible: false,
      editDialogVisible: false,
      roleDialogVisible: false,
      keyword: '',
      selectRoles: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      input: '',
      // value: '',
      // options: [{
      //   value: 'enable',
      //   label: '启用'
      // }, {
      //   value: 'disable',
      //   label: '禁用'
      // }],
      adminList: [{
        id: '01',
        username: 'xiaohu',
        nickname: '王小虎',
        avatar: '',
        phone: '13800138000',
        email: 'demo',
        description: 'demo',
        enable: 1,
        lastLoginIp: '0.0.0.0',
        loginCount: 1,
        gmtLastLogin: '2011-11-11 11:11:11'
      }, {
        id: '01',
        username: 'xiaohu',
        nickname: '王小虎',
        avatar: '',
        phone: '13800138000',
        email: 'demo',
        description: 'demo',
        enable: 1,
        lastLoginIp: '0.0.0.0',
        loginCount: 1,
        gmtLastLogin: '2011-11-11 11:11:11'
      }, {
        id: '01',
        username: 'xiaohu',
        nickname: '王小虎',
        avatar: '',
        phone: '13800138000',
        email: 'demo',
        description: 'demo',
        enable: 1,
        lastLoginIp: '0.0.0.0',
        loginCount: 1,
        gmtLastLogin: '2011-11-11 11:11:11'
      }]
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    loadList() {
      const param = {
        name: this.keyword,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      api.list(param).then(res => {
        console.log(res)
        const page = res.data
        this.adminList = page.data
        this.pageNum = page.pageNum
        this.pageSize = page.pageSize
        this.total = page.total
      })
    },
    changeEnable(admin, index) {
      console.log('changeEnable')
      console.log(admin)
      console.log(index)
      if (admin.enable === 1) {
        api.enable(admin.id).then(res => {
          console.log(res)
        })
      } else {
        api.disable(admin.id).then(res => {
          console.log(res)
        })
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleAvatarSuccess(res, file) {
      console.log('handleAvatarSuccess')
      console.log(res)
      this.formData.avatar = res.data
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      console.log('beforeAvatarUpload')
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleAddNew() {
      console.log('handleAddNew')
    }
  }
}
</script>

<style scoped>
.avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 20px;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
}
.avatar {
    width: 130px;
    height: 130px;
    display: block;
}
</style>
